<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />

    

    

    <title>基于taro-ui开发的活动选择器 | 郑礼德技术栈</title>
    <meta name="author" content="郑礼德" />
    <meta name="keywords" content="" />
    <meta name="description" content="基于taro-ui 开发的活动选择器首先要安装classnames  npm install classnames -S先看看效果jsx部分import Taro, { Component, Config } from &amp;#39;@tarojs/taro&amp;#39;import { View, Text,Button } from &amp;#39;@tarojs/components&amp;#39;import { AtRadio  } from &amp;#39;taro-ui&amp;#39;im..." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    
    <link rel="alternate" href="/homepage/atom.xml" title="郑礼德技术栈" type="application/atom+xml">
    
    
    <link rel="icon" href="/homepage/images/favicon.ico">
    

    <style type="text/css">
    @font-face {
        font-family: 'icomoon';
        src: url("/homepage/fonts/icomoon.eot?q628ml");
        src: url("/homepage/fonts/icomoon.eot?q628ml#iefix") format('embedded-opentype'),
             url("/homepage/fonts/icomoon.ttf?q628ml") format('truetype'),
             url("/homepage/fonts/icomoon.woff?q628ml") format('woff'),
             url("/homepage/fonts/icomoon.svg?q628ml#icomoon") format('svg');
        font-weight: normal;
        font-style: normal;
    }
    </style>
    
<link rel="stylesheet" href="/homepage/css/style.css">


    <!--[if lt IE 9]>
    <style type="text/css">
    .nav-inner {top:0;}
    .author-meta {position:static;top:0;}
    .search-form {height:36px;}
    </style>
    <script type="text/javascript" src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <![endif]-->
<meta name="generator" content="Hexo 4.2.0"></head>
<body>

    <main class="app">
        <header id="header" class="header clearfix">
    <div id="nav" class="nav">
    <div class="nav-mobile">
        <button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button>
        <h1 class="nav-mobile-title nav-mobile-item">郑礼德技术栈</h1>
        <button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button>
    </div>

    <nav id="nav-inner" class="nav-inner">
        
            <a class="nav-item" href="/homepage/">
                <span class="nav-text">首页</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/front-end">
                <span class="nav-text">前端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/back-end">
                <span class="nav-text">后端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/linux">
                <span class="nav-text">linux部署</span>
            </a>
        
            <a class="nav-item" href="/homepage/tags">
                <span class="nav-text">标签</span>
            </a>
        
            <a class="nav-item" href="/homepage/archives">
                <span class="nav-text">归档</span>
            </a>
        
            <a class="nav-item" href="/homepage/about">
                <span class="nav-text">关于</span>
            </a>
        
    </nav>
</div>

    <aside id="aside" class="aside">
    <div id="aside-mask" class="aside-mask"></div>
    <div id="aside-inner" class="aside-inner">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="http://zhenglide.gitee.io/homepage"></form>

        
        
        
        

        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#jsx部分"><span class="toc-number">1.</span> <span class="toc-text">jsx部分</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#scss部份"><span class="toc-number">2.</span> <span class="toc-text">scss部份</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用演示"><span class="toc-number">3.</span> <span class="toc-text">使用演示</span></a></li></ol>
        
    </div>
</aside>

</header>

        <div id="content" class="content">
            <div id="wrapper" class="wrapper" style="max-width: 800px">
                <article class="article" itemscope itemprop="blogPost">
    
    <header class="article-header">
        
        <h1 itemprop="name">
            基于taro-ui开发的活动选择器
        </h1>
        
        <div class="article-meta clearfix">
            <a class="article-date" href="http://zhenglide.gitee.io/homepage/2020/06/12/%E5%9F%BA%E4%BA%8Etaro-ui%E5%BC%80%E5%8F%91%E7%9A%84%E6%B4%BB%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8/index.html">
    
    <i class="icon-calendar"></i>
    
    <time datetime="2020-06-12T02:32:04.000Z" itemprop="datePublished">2020-06-12</time>
</a>

            
<div class="article-tag-list">
    <i class="icon-tag"></i>
    <a class="article-tag-link" href="/homepage/tags/react/" rel="tag">react</a>, <a class="article-tag-link" href="/homepage/tags/taro-ui/" rel="tag">taro-ui</a>
</div>


        </div>
    </header>
    
    <section class="article-body markdown-body">
        
        <p>基于taro-ui 开发的活动选择器</p>
<a id="more"></a>

<p>首先要安装classnames  <code>npm install classnames -S</code>先看看效果</p>
<img src="/homepage/2020/06/12/%E5%9F%BA%E4%BA%8Etaro-ui%E5%BC%80%E5%8F%91%E7%9A%84%E6%B4%BB%E5%8A%A8%E9%80%89%E6%8B%A9%E5%99%A8/%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA.png" class="">

<h2 id="jsx部分"><a href="#jsx部分" class="headerlink" title="jsx部分"></a>jsx部分</h2><pre><code class="jsx">import Taro, { Component, Config } from &#39;@tarojs/taro&#39;
import { View, Text,Button } from &#39;@tarojs/components&#39;
import { AtRadio  } from &#39;taro-ui&#39;
import classNames from &#39;classnames&#39;
import &quot;./index.scss&quot;;
export default class Index extends Component {


  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  componentWillReceiveProps(nextProps){
    const { isOpened } = nextProps
    if (isOpened !== this.state._isOpened) {
      this.setState({
        _isOpened: isOpened
      })

      !isOpened &amp;&amp; this.close()
    }
  }
  constructor(props) {
     super(props);
     const {isOpened} = props;
     this.state = {
        value:&quot;&quot;,
        _isOpened:this.props.isOpened
     };
  }


  handleChange(value){
    // console.log(v);
    this.setState({
      value
    })
  }
   close(){
    console.log(&quot;close&quot;);
    this.setState({
      _isOpened:false
      })
    if (typeof this.props.onClose === &#39;function&#39;) {
      return this.props.onClose()
    }

   }
   onOk(){
   var value = this.state.value;
   this.close();
      if (typeof this.props.onOk === &#39;function&#39;) {
        return this.props.onOk({value})
      }

   }
  render () {
    const { title, radioOption,desc,className ,isOpened } = this.props;
    const { _isOpened } = this.state

    const rootClass = classNames(
      &#39;select-sheet&#39;,
      {
        &#39;select-sheet--active&#39;: _isOpened
      },
      className
    )

    return (
      &lt;View className={rootClass}&gt;
           &lt;View className=&quot;select-sheet__overlay&quot; onClick={this.close.bind(this)}&gt;&lt;/View&gt; 
           &lt;View className=&quot;select-sheet__container&quot;&gt;
                 &lt;View className=&quot;select-sheet__header&quot;&gt;
                    &lt;View className=&quot;select-sheet__header__title&quot;&gt;
                        {this.props.title}
                        {desc &amp;&amp; &lt;View className=&quot;select-sheet__header__title__desc&quot;&gt;{desc}&lt;/View&gt;}
                     &lt;/View&gt;
                    &lt;Button className=&quot;select-sheet__header__btn&quot; onClick={this.onOk.bind(this)}&gt;确定&lt;/Button&gt;
                 &lt;/View&gt;
                 &lt;AtRadio
                        options={this.props.radioOption}
                        value={this.state.value}
                        onClick={this.handleChange.bind(this)}
                    /&gt;
           &lt;/View&gt;
      &lt;/View&gt;
    )
  }
}
</code></pre>
<h2 id="scss部份"><a href="#scss部份" class="headerlink" title="scss部份"></a>scss部份</h2><pre><code class="scss">@import &quot;../../static/css/mixin.scss&quot;;
$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1) !default;
$at-action-sheet-duration: 300ms;
$zindex-action-sheet:1090;
.select-sheet{

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: $zindex-action-sheet;
    visibility: hidden;
    transition: visibility $at-action-sheet-duration $timing-func;
     &amp;__overlay{
          top:0;
          left: 0;
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: rgba( #000, 0.3);
     }
     &amp;__container{
         position: absolute;
         bottom: 0;
         width: 100%;
         text-align: center;

         padding-bottom:100px;
         background-color: #fff;
         transform: translate3d(0,100%,0);
         transition:transform $at-action-sheet-duration $timing-func;
     }
     &amp;__header{
         display: flex;
          justify-content: space-between;
          align-items: center;
           margin:20px;
           &amp;__title{
              font-size: 32px; 
              text-align: left;
              &amp;__desc{
                  color: #CACACA;
                  font-size: 28px;
                  margin:10px 0 0 0;
                  text-align: left;

              }
           }

           &amp;__btn{
               font-size: 32px;
            margin:0;
             background-color:$color-brand;
           }

     }

     &amp;--active {
        visibility: visible;

        .select-sheet__overlay {
          opacity: 1;
        }

        .select-sheet__container {
          transform: translate3d(0, 0, 0);
        }
      }
}</code></pre>
<h2 id="使用演示"><a href="#使用演示" class="headerlink" title="使用演示"></a>使用演示</h2><pre><code class="jsx"> &lt;SelectSheet isOpened={this.state.isOpenDate} onClose={this.closeDate.bind(this)} onOk={this.okDate.bind(this)}  title=&quot;请选择广播有效时间&quot; radioOption={[
          { label: &#39;12小时&#39;, value: &#39;12&#39; },
          { label: &#39;24小时&#39;, value: &#39;24&#39; },
          { label: &#39;48小时&#39;, value: &#39;48&#39; },
          { label: &#39;72小时&#39;, value: &#39;72&#39; }
        ]}&gt;&lt;/SelectSheet&gt;</code></pre>
<p>其中 isOpened 是打开状态</p>
<p>onClose 是关闭回调函数</p>
<p>onOk 是确定回调函数</p>
<p>title 是标题</p>
<p>radioOptions是选项 ，radioOption 参考taro </p>
<p>radio 的option</p>
<table>
<thead>
<tr>
<th align="left">参数</th>
<th align="left">说明</th>
<th align="left">类型</th>
<th align="left">可选值</th>
<th align="left">默认值</th>
<th align="left">可选或必填</th>
</tr>
</thead>
<tbody><tr>
<td align="left">value</td>
<td align="left">选项标识符，必须保证唯一</td>
<td align="left">String</td>
<td align="left">-</td>
<td align="left">-</td>
<td align="left">必填</td>
</tr>
<tr>
<td align="left">label</td>
<td align="left">选项标题</td>
<td align="left">String</td>
<td align="left">-</td>
<td align="left">-</td>
<td align="left">必填</td>
</tr>
<tr>
<td align="left">desc</td>
<td align="left">选项描述，显示在标题下方的文字</td>
<td align="left">String</td>
<td align="left">-</td>
<td align="left">-</td>
<td align="left">可选</td>
</tr>
<tr>
<td align="left">disabled</td>
<td align="left">是否禁止点击</td>
<td align="left">Boolean</td>
<td align="left">-</td>
<td align="left">false</td>
<td align="left">可选</td>
</tr>
</tbody></table>

        
    </section>
</article>



<a id="pagenext" href="/homepage/2020/06/10/docker%E4%BD%BF%E7%94%A8Let-sEncrypt%E9%85%8D%E7%BD%AEhttps/" class="article-next" title="docker使用Let&#39;sEncrypt配置https"><i class="icon-arrow-right"></i></a>


<a id="pageprev" href="/homepage/2020/08/13/react-redux%E7%9A%84%E4%BD%BF%E7%94%A8/" class="article-prev" title="react-redux的使用"><i class="icon-arrow-left"></i></a>




            </div>
        </div>
        <footer class="footer">
    Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a>

    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b13bb4c2ef8300062aab9732bd22eae0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
</footer>

    </main>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var nodes = {
            nav: $('#nav'),
            aside: $('#aside'),
            asideInner: $('#aside-inner'),
            navInner: $('#nav-inner')
        };

        var doing = false;
        nodes.asideInner.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
            if (nodes.aside.hasClass('mobile-open')) {
                nodes.aside.removeClass('mobile-open');
            } else {
                nodes.aside.removeClass('mobile-close panel-show');
            }
            doing = false;
        });
        $('#open-panel, #aside-mask').on('click', function() {
            if (doing) {
                return;
            }

            if (nodes.aside.hasClass('panel-show')) {
                nodes.aside.addClass('mobile-close');
            } else {
                nodes.aside.addClass('mobile-open panel-show');
            }
        });
        $('#open-menus').on('click', function() {
            nodes.navInner.slideToggle();
        });

        if (window.innerWidth <= 960) {
            setTimeout(function() {
                nodes.navInner.slideUp();
            }, 3000);
        }
    });
    </script>
    
        
<script src="/homepage/js/scrollspy.min.js"></script>

        <script type="text/javascript">
        $(document.body).scrollspy({target: '#aside-inner'});

        $(window).on('resize', function() {
            var hw = $('#header').width();
            var ww = $('#wrapper').width();
            var space = ($(this).width() - hw - ww) / 2 / 2;

            var pageprev = $('#pageprev');
            var pagenext = $('#pagenext');
            var avg = (pageprev.width() + pagenext.width()) / 2

            if(space > avg) {
                var len = space - avg / 2;
                var styles = {position: 'fixed', top: '50%', marginTop: - (pageprev.width() + pagenext.width()) / 4}
                pageprev.css($.extend({left: hw + len}, styles));
                pagenext.css($.extend({right: len}, styles));
            } else {
                pageprev.removeAttr('style');
                pagenext.removeAttr('style');
            }
        }).trigger('resize');
        </script>
    

</body>
</html>
